<template>
  <el-table :data="roleList" style="width: 100%" stripe border ref="roleTable" @expand-change="expandChange">
    <!-- 权限展开项 -->
    <el-table-column type="expand">
      <template v-slot="data">
        <role-permission-table :rid="data.row.id" ref="permissionTableRef" />
      </template>
    </el-table-column>

    <!-- index 序列 -->
    <el-table-column label="#" type="index" align="center"></el-table-column>

    <!-- 角色名称 -->
    <el-table-column prop="roleName" label="角色名称" align="center"></el-table-column>

    <!-- 角色描述 -->
    <el-table-column prop="roleDesc" label="角色描述" align="center"></el-table-column>

    <!-- 操作 -->
    <el-table-column prop="level" label="操作" align="center">
      <template v-slot="data">
        <!-- 按钮区 -->
        <el-button-com
          size="small"
          btnType="primary"
          icon="el-icon-edit"
          text="编辑"
          @click.native="openDialog(data.row)"
        />
        <el-button-com
          size="small"
          btnType="danger"
          icon="el-icon-delete"
          text="删除"
          @click.native="delUserById(data.row)"
        />
        <el-button-com
          size="small"
          btnType="warning"
          icon="el-icon-setting"
          text="分配权限"
          @click.native="openTreeDialog(data.row)"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
// 组件
import ElButtonCom from '@/components/common/ElButtonCom'
import RolePermissionTable from '@/views/Main/rightList/roleListComponents/RolePermissionTable';

// 网络
import { delRole } from '@/network/roleControlRequest'

export default {
  props: {
    roleList: {
      type: Array
    }
  },
  methods: {
    /**
     * 编辑
     */
    openDialog(row) {
      // 发送给dialog封装组件
      this.$bus.$emit('tableBtnId', row.id)
    },

    /**
     * 删除角色
     */
    async delUserById(row) {
      // 根据id删除指定用户
      const ret = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).catch(error => {
        return error
      })

      if (ret !== 'confirm') {
        return this.$message.error('删除操作取消')
      }

      // 网络请求删除操作
      // console.log('删除操作', row);
      const { meta } = await delRole(row.id)

      if (meta.status !== 200) {
        console.log(meta)
        return this.$message.error(meta.msg)
      }
      this.$bus.$emit('getRole')
      return this.$message.success(meta.msg)
    },

    /**
     * 分配权限
     */
    openTreeDialog(data) {
      this.$bus.$emit('treeDialogOpen', data);
      this.$refs["roleTable"].toggleRowExpansion(data, false); // 关闭当前展开行
    },

    /**
     * 展开表单
     */
    async expandChange(row, expanded) {
      // console.log(expanded.length);
      if (expanded.length < 1) {return;}
      // console.log(row.id);
      await this.$nextTick(() => this.$refs['permissionTableRef'].getRolePermissions());
    }
  },
  components: {
    ElButtonCom,
    RolePermissionTable
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 20px;
}
</style>